<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" @submit.native.prevent>
                <el-form-item :label="$t('语言分类')">
                    <el-select class="flex-1" v-model="queryParams.client_id" clearable :placeholder="$t('请选择语言分类')">
                        <el-option :label="$t('全部')" value="" />
                        <el-option v-for="(item, index) in optionsData.client" :key="index" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('所属语言')">
                    <el-select class="flex-1" v-model="queryParams.type_id" clearable :placeholder="$t('请选择语言')">
                        <el-option :label="$t('全部')" value="" />
                        <el-option v-for="(item, index) in optionsData.lang" :key="index" :label="item.language_name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('翻译语句')">
                    <el-input class="w-[280px]" v-model="queryParams.keyword" :placeholder="$t('翻译语句')" clearable
                        @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">{{ $t('查询') }}</el-button>
                    <el-button @click="resetParams">{{ $t('重置') }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button v-perms="['setting/lang/translate/add']" type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    {{ $t('新增') }}
                </el-button>
                <el-button type="primary" @click="buildLangPack()">
                    <template #icon>
                        <icon name="local-icon-language" />
                    </template>
                    {{ $t('生成语言包') }}
                </el-button>
            </div>
            <el-table size="large" class="mt-4" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="ID" prop="id" min-width="80" align="center" />
                <el-table-column :label="$t('语言分类')" prop="client_id" min-width="100" align="center">
                    <template #default="{ row }">
                        <dict-value :options="optionsData.client" :config="{
                            label: 'label',
                            value: 'value'
                        }" :value="row.client_id" />
                    </template>
                </el-table-column>
                <el-table-column :label="$t('所属语言')" prop="type_id" min-width="100" align="center">
                    <template #default="{ row }">
                        <dict-value :options="optionsData.lang" :config="{
                            label: 'language_name',
                            value: 'id'
                        }" :value="row.type_id" />
                    </template>
                </el-table-column>
                <el-table-column :label="$t('翻译语句')" prop="code" min-width="100" align="center">
                    <template #default="{ row }">
                        <el-tag>{{ row.code }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('译文')" prop="after_text" min-width="100" align="center">
                    <template #default="{ row }">
                        <el-tag type="success">{{ row.after_text }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['setting/lang/translate/detail']" type="primary" link @click="handleEdit(row)">
                            {{ $t('编辑') }}
                        </el-button>
                        <el-button v-if="row.pid !== 0" v-perms="['setting/lang/translate/delete']" type="danger" link
                            @click="handleDelete(row)">
                            {{ $t('删除') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" :client-options="optionsData.client" :lang-options="optionsData.lang" ref="editRef"
            @success="getLists" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="translate">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { usePaging } from '@/hooks/usePaging'
import { useDictOptions } from '@/hooks/useDictOptions'
import dictValue from '@/components/dict-value/index.vue'
import feedback from '@/utils/feedback'
import { getTranslateClientOptions, getLangAll, translateLists, translateDelete, getLangPack } from '@/api/setting/lang'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
import EditPopup from './edit.vue'
const queryParams = reactive({
    keyword: '',
    client_id: '',
    type_id: '',
})
const showEdit = ref(false)

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: translateLists,
    params: queryParams
})

const { optionsData } = useDictOptions<{
    client: any[]
    lang: any[]
}>({
    client: {
        api: getTranslateClientOptions
    },
    lang: {
        api: getLangAll
    }
})

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
    editRef.value?.initForm()
}

// 生成语言包
const buildLangPack = async () => {
    const data: any = await getLangPack()
    if (data.file) {
        window.open(data.file, '_blank')
    }
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (data: any) => {
    await feedback.confirm(t('确定要删除?'))
    await translateDelete({
        id: data.id,
        code: data.code,
        client_id: data.client_id,
    })
    getLists()
}

getLists()
</script>
